import { InfoCircleOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from "antd";
import { Checkbox, Input, Radio, Select, Switch } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import { useEffect, useState } from "react";
import request from "umi-request";
import "./style/AgentLevel/AgentLevel.scss";
const response = await request.get("/api/company");

//定义的tab切换数据的类型
interface Tab {
  label: string;
}
//定义的addtab切换数据的类型
interface AddTab {
  Addlabel: string;
}

const AgentLevel = () => {
  const now = new Date();
  const year = now.getFullYear(); // 获取当前年份
  const month = now.getMonth() + 1; // 获取当前月份（注意返回值范围是0-11）
  const day = now.getDate(); // 获取当前日期
  //tab切换数据
  const TABS: Tab[] = [{ label: "列表" }, { label: "添加" }];
  //添加里的tab切换数据
  //tab表格数据
  const [arr, setarr] = useState<any>([
    {
      id: "788524244",
      checked: false,
      "paixu|100-1000": 100,
      xiaoqu: "@ctitle(4,6)",
      quyu: "@city",
      date: "@date",
      "checkedtwo|1": false,
    },
  ]);
  const [narr, setnarr] = useState([]);
  //tab切换
  const [activeTab, setActiveTab] = useState<number>(0);
  //添加里面的的tab切换
  const [AddactiveTab, setAddActiveTab] = useState<number>(0);
  //状态
  const [status, setstatus] = useState<boolean>(false);
  //tab切换点击
  function handleClick(index: number) {
    setActiveTab(index);
  }
  //添加里面的的tab切换点击
  function handleClickAdd(index: number) {
    setAddActiveTab(index);
    console.log(index);
  }

  //下拉框
  const onChange = (value: string) => {
    let brr = [...arr];
    if (value == "启用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == true;
      });
      setnarr(crr);
    } else if (value == "禁用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == false;
      });
      setnarr(crr);
    } else {
      setnarr(arr);
    }
  };

  //搜索 模糊查询
  const onSearch = (value: string) => {
    let brr = [...arr];
    let crr: any = brr.filter((item) => {
      return item.xiaoqu.includes(value);
    });
    setnarr(crr);
  };

  //input
  const { Search } = Input;

  //顶部多选框
  function checkAll(e: any) {
    console.log(`checkAll = ${e.target.checked}`);
  }
  //反选
  function yfaBdbawi(item: any) {
    let brr = [...arr];
    for (let i = 0; i < arr.length; i++) {
      if (brr[i].id == item.id) {
        item.checked = !item.checked;
      }
    }

    setarr(brr);
    let kgMc = brr.every((item) => {
      return item.checked;
    });
    setkg(kgMc);
  }
  //底部多选框
  const Checkboxs = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //单选
  function check(e: any) {
    console.log(`单选 = ${e.target.checked}`);
  }
  //编辑点击事件
  function edit() {
    console.log("编辑", 1);
  }
  //删除点击事件
  function del() {
    console.log("删除", 1);
  }
  //选中删除
  function shanchu() {
    let brr = [...narr];
    let crr: any = [];
    brr.forEach((item: any, index) => {
      if (item.checked === false) {
        crr.push(item);
      }
    });
    setnarr(crr);
    setkg(false);
  }
  //配套信息里的提交按钮
  function AddTj() {}
  //小区信息里的提交按钮
  function CommunityAddtj() {
    let brr = [...narr];
    brr.push(brr[0]);
    setnarr(brr);
    setActiveTab(0);
  }
  //状态
  function statu(e: any) {
    let brr = [...narr];
    brr.forEach((item: any, index) => {
      if (item == e) {
        item.checkedtwo = !item.checkedtwo;
      }
    });
    setnarr(brr);
  }
  ///全选
  function inputc(e: any) {
    setkg(e.target.checked);
    let brr: any = [...narr];
    brr.forEach((item: any) => {
      return (item.checked = e.target.checked);
    });
    setnarr(brr);
  }
  //添加里面的 单选框
  const [value, setValue] = useState(1);
  //定义全选状态
  const [kg, setkg] = useState(false);
  const onChangeRadio = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };
  //删除
  function delect(index: number) {
    let brr = [...narr];
    brr.splice(index, 1);
    setnarr(brr);
  }
  useEffect(() => {
    setarr(response);
    setnarr(response);
  }, []);
  return (
    //大盒子
    <div className="Agentbox">
      <div className="Addmenu">
        <button>添加分类</button>
      </div>
      <div className="CommunityMain">
        {/* tab切换 内容  列表*/}
        <div
          className="Communitytab"
          style={{ display: activeTab == 0 ? "block" : "" }}
        >
          <div className="tabBox">
            {/* tab表格 */}
            <table className="table" cellSpacing={0}>
              {/* 头部 */}
              <thead>
                <tr>
                  <td>ID</td>
                  <td>分类名</td>
                  <td>操作</td>
                </tr>
              </thead>
              {/* 中间 */}

              <tbody>
                {/* 渲染 */}
                {narr
                  ? narr.map((item: any, index: number) => {
                      return (
                        <tr key={index}>
                          <td style={{ width: "8vw" }}>{item.id}</td>
                          <td style={{ width: "60vw" }}>{item.ctitles}</td>
                          <td>
                            <button className="qx" onClick={edit}>
                              权限设置
                            </button>
                            <button
                              className="del"
                              onClick={() => delect(index)}
                            >
                              删除
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  : ""}
              </tbody>
            </table>
          </div>
          {/* 底部 */}
          <div className="CommunityFoot">
            <div className="CommunityFootA">
              <Checkbox checked={kg} onChange={inputc}>
                全选/取消
              </Checkbox>

              <button onClick={shanchu}>删除</button>
            </div>
          </div>
          {/* 状态显示 */}
          <div
            className="tbodystatu"
            style={{
              display: status ? "block" : "",
            }}
          >
            <img src={require("../../imgs/tu.png")} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AgentLevel;
